<template>
	<view class="content">
		<topBox :buttonShow="role === 'big'? true : false"></topBox>
		<u-button class="publish_btn" type="error" :custom-style="customStyle" @click="goPublish" v-if="role === 'big'? true : false">发布招聘信息</u-button>
		<view class="list-wrap">
			<view class="list-item" v-for="(item, index) in list" :key="index">
				<view class="item-title" @click="toDesc(item)">
					<view class="">
						<!-- <u-tag :text="item.recruit_status == 2 ? '长期工':'短期工'" size="mini" type="success" /> -->
						<text class="name"  @click="toDesc(item)">
							{{ item.recruit_type_work }}
						</text>
					</view>
					
					<text class="price">{{ item.recruit_salary }}</text>
				</view>
				<view class="item-con"  @click="toDesc(item)" v-if="role != 'small'">
					<view class="con-row">
						<text class="txt">具体要求：</text>
						<view class="txt-con">{{ item.recruit_requirement }}</view>
					</view>
					<view class="flex-row">
						<view class="row">
							应聘人数：
							<text class="light">{{ item.recruit_ordered }}/{{ item.recruit_people_number }}</text>
						</view>
					</view>
					<view class="con-row" v-if="item.recruit_is_show_phone">
						<text class="txt">联系电话：</text>
						<view class="txt-con">
							<text style="color: #fff;padding:5upx 10upx;background-color: #007AFF;" @click="makeCall(item)">{{ item.recruit_link_tel }}</text>
						</view>
					</view>
					<view class="flex">
						<view class="img-box">
							<image v-for="picitem in item.recruit_pic" :key="picitem.images_id" class="img" :src="picitem.images_url" mode="aspectFill"></image>
						</view>
						<view class="status">
							<text>状态：</text>
							<text v-if="item.recruit_status == 2">发布</text>
							<text v-if="item.recruit_status == 1">下架</text>
						</view>
					</view>
					<view class="message" v-if="role === 'big' || role === 'small' ? true : false">
						{{item.recruit_content || ''}}
					</view>
				</view>
				
				<view class="item-con" v-else  @click="toDesc(item)" >
					<view class="con-row">
						<text class="txt">地址：</text>
						<view class="txt-con">{{item.recruit_area +'  '}}{{ item.recruit_address }}</view>
					</view>
					<view class="flex" style="margin-bottom: 10rpx;">
						<view class="txt">
							发布时间：{{item.recruit_create_time}}
						</view>
						<view class="status">
							<text>距离您{{item.recruit_distance}}公里</text>
						</view>
					</view>
				</view>
				<view class="bottom flex" v-if="role === 'big'? true : false">
					<u-button type="primary" @click="reEdit(item.recruit_id)">编辑重发</u-button>  
					<u-button v-if="item.recruit_status == 2" type="warning" :custom-style="customStyle" @click="downRecruit(item.recruit_id)">下架</u-button>
				</view>
			</view>

			<!-- 数据为空 -->
			<u-empty v-if="list.length == 0" text="暂无数据~" :margin-top="100"></u-empty>
			<!-- 加载更多 -->
			<u-loadmore v-if="list.length" :status="loadStatus" bg-color="#f5f8ff" :margin-top="20" :margin-bottom="20" />
		</view>
		<tabBar :selected="role == 'big' ? 0 : 1"></tabBar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import topBox from '../../components/top-box/top-box.vue';
import tabBar from '../../components/tabBar/tabBar.vue';
export default {
	components: {
		topBox,
		tabBar
	},
	data() {
		return {
			isShowDown: false,
			videoCurrTime: 0,
			videoTitle: 'zhemvopswemvop    wjfopjeowjmpiojm',
			customStyle: {
				'background': '#E04110',
				'border-color': '#E04110',
				'color': '#fff'
			},
			loadStatus: 'nomore',
			params: {
				startRow: 1,
				rowSize: 6,
				latitudes: '',
				longitudes: '',
				status: 'FB'
			},
			list: [],
			imageCode: '',
			show: true,
			userId: uni.getStorageSync('userId'),
			token: uni.getStorageSync('token'),
			role: uni.getStorageSync('role')	
		};
	},
	computed: {
		...mapState({
			// userId: state => state.userId
		})
	},
	onShow() {
		this.list = []
		this.params = {
			startRow: 1,
			rowSize: 6,
			latitudes: '',
			longitudes: '',
			status: 'FB'
		}
		if(!this.params.latitudes) {
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					this.params.latitudes = res.latitude;
					this.params.longitudes = res.longitude;
					let token = uni.getStorageSync('token');
					if(!token){
						uni.navigateTo({
							url:'../login?type=1'
						})
						return false;
					}
					this.postGetActivityList('up');
				}
			});
		} else {
			let token = uni.getStorageSync('token');
			if(!token){
				uni.navigateTo({
					url:'../login?type=1'
				})
				return false;
			}
			this.postGetActivityList('up');
		}
		
	},
	onLoad(e) {
		this.userId = uni.getStorageSync('userId');
		if (e.scene) {
			let scene = decodeURIComponent(e.scene);
			uni.setStorageSync('recId', e.scene);
		}
	},
	onPullDownRefresh() {
		this.dropDown();
	},
	onReachBottom() {
		this.pullUp();
	},
	onShareAppMessage(res) {
		const userInfo = uni.getStorageSync('userInfo')
		// console.log()
		if(this.role == 'big') {
			const {id, nickname} = userInfo
			console.log('/pages/share/invitation?recId=' + id + '&name=' + nickname)
			return {
				title: `嗨！我邀请你成为的专属代理啦`,
				imageUrl: '../../static/image/share.jpg',
				path: '/pages/share/invitation?recId=' + id + '&name=' + nickname
			}
		} else {
			return {
				title: `嗨！快来加入我们平台吧`,
				imageUrl: '../../static/image/share.jpg',
				path: 'pages/index/home'
			}
		}

		// let id = res.target.dataset.id;
		// let item = this.list.find(obj => obj.recruit_id == id);
		// setTimeout(function() {
		// 	item.recruit_is_show_phone = !item.recruit_is_show_phone;
		// }, 3000);

		// let recId = uni.getStorageSync('userId');
		// let recType = 'GG';
		// console.log('pages/index/index?id=' + item.recruit_id + '&recId=' + recId + '&recType=' + recType);
		// return {
		// 	title: item.recruit_type_work + ' (' + item.recruit_salary + ')',
		// 	path: 'pages/index/index?id=' + item.recruit_id + '&recId=' + recId + '&recType=' + recType,
		// 	imageUrl: '../../static/image/share.jpg',
		// 	success: res => {
		// 		console.log('转发成功', res);
		// 	},
		// 	fail: res => {
		// 		console.log('转发失败', res);
		// 	}
		// };
	},
	methods: {
		toDesc(row){
			if(!row.recruit_id){
				return uni.showToast({
					title:'数据异常，请稍后再试',
					icon:'none'
				})
			}
			console.log(row)
			uni.navigateTo({
				url:'../preview/previewDetail?recruit_id='+row.recruit_id +'&id=' + row.id
			})
			console.log(row.recruit_id)
		},
		goPublish(){
			uni.navigateTo({
				url:'../talent/publish-post'
			})
		},
		reEdit(recruit_id) { // 编辑重发
			uni.navigateTo({
				url: '/pages/talent/publish-post?reId=' + recruit_id
			})
		},
		clickFormView(event) {
			let formId = event.detail.formId;

			// 忽略开发者工具里边的formId
			if (formId && formId !== 'the formId is a mock one') {
				wx.request({
					method: 'POST',
					url: '/api/collectFormId', // 该接口只用来收集formId
					data: { formId: formId } // 只传了一个formId，因为openid和当前用户通常会事先在后台做一个关联，看具体业务了
				});
			}
			// 然后可以干其他事了，比如跳转页面，其他业务逻辑
			// TODO
		},
		makeCall(item) {
			uni.makePhoneCall({
				phoneNumber: item.recruit_link_tel
			});
		},
		queryActOrder() {
			return new Promise((resolve, reject) => {
				let params = {};
				this.$u.api.postQueryActOrder(params).then(res => {
					if (res.code == 1000) {
						let data = res.data;
						if (data.isfree) {
							uni.navigateTo({
								url: '/pages/order/place-order?id=' + data.id
							});
						}
						resolve();
					}
				});
			});
		},
		// 下拉刷新
		dropDown() {
			console.log('down');
			// 修改当前view的数据
			this.params.startRow = 1;
			// 加载下拉刷新的数据
			this.postGetActivityList('down');
		},
		// 上拉加载
		pullUp() {
			console.log('up');
			// 增加页数
			this.params.startRow++;
			// 请求获取数据
			this.postGetActivityList('up');
		},
		goLogin() {
			uni.showModal({
				title: '提示',
				content: '您需要登录才可以进行后续操作哦！',
				cancelText: '暂不登录',
				confirmText: '选择身份',
				success: res => {
					res.confirm && uni.reLaunch({
						url: '/pages/index/home'
					})
				}
			})
		},
		// 活动管理-查询活动列表
		postGetActivityList(type) {
			let token = uni.getStorageSync('token');
			let promise
			switch(this.role) {
				case 'big':
					promise = this.$u.api.postPageQueryByWork(this.params)
					break
				case 'small':
					promise = this.$u.api.minPageQuery(this.params)
					break
				case 'any':
					promise = this.$u.api.minPageQuery(this.params)
					break
					default:
					promise = this.$u.api.minPageQuery(this.params)
					break
			}
			promise.then(res => {
					uni.stopPullDownRefresh();
					if (res.status == true) {
						let data = res.data;
						// 如果是上拉加载
						if (type == 'up') {
							// 判断分页
							if (res.data.length <= this.params.rowSize) {
								for (var i = 0; i < res.data.length; i++) {
									this.list.push(res.data[i]);
								}
								this.loadStatus = 'loading';

								// 如果数量小于页容量，显示没有更多数据
								if (res.data.length < this.params.rowSize) {
									this.loadStatus = 'nomore';
								}
							} else {
								this.params.rowSize = res.data.total;
								this.loadStatus = 'nomore';
							}
						}

						// 如果是下拉刷新
						if (type == 'down') {
							// 将数据
							for (var i = 0; i < res.data.length; i++) {
								this.list.push(res.data[i]);
							}

							this.list.splice(0, this.list.length == 0 ? 0 : this.list.length - res.data.length);
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
				.catch(err => {
					uni.stopPullDownRefresh();
				});
		},
		placeOrder(itemId) {
			let token = uni.getStorageSync('token');
			if (token) {
				let params = {
					id: itemId
				};
				this.$u.api.postReceiving(params).then(res => {
					if (res.status == true) {
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
					}
				});
			} else {
				uni.redirectTo({
					url: '/pages/login'
				});
			}
		},
		// generateCode() {
		// 	let params = {
		// 		busiType: 1,
		// 		busiId: uni.getStorageSync('userId') + ',GG',
		// 		url: 'pages/index/index'
		// 	};
		// 	this.$u.api.postGenerateQrCode(params).then(res => {
		// 		if (res.status == true) {
		// 			this.imageCode = 'data:image/jpeg;base64' + res.data;
		// 		}
		// 	});
		// },
		downRecruit(recruit_id) {
			// 下架招聘信息
			uni.showModal({
				title:'提示',
				content: '确定要下架当前岗位吗？',
				success: res => {
					if(res.confirm) {
						this.$u.api.postShelfReruit({recruit_id}).then(res => {
					if (res.status == true) {
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
						this.params.startRow = 1
						this.postGetActivityList()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
					})
					}
					}
			})
		},
		preview(url, urls) {
			uni.previewImage({
				current: url,
				urls: urls.map(item => item.url)
			});
		},
		previewImageVideo(item, index) {
			// 预览图片视频
			uni.navigateTo({
				url: '/pages/preview/index?id=' + item.recruit_id + '&index=' + index
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content {
	position: relative;
	// padding-top: 146upx;
	padding-bottom: 30rpx;
	.list-wrap {
		margin-top: 20upx;
		padding: 0 20upx 20upx;
		position: relative;
		z-index: 10;
		.list-item {
			padding: 30upx 20upx 10upx;
			background: #fff;
			box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);
			border-radius: 6px;
			margin-bottom: 20upx;

			.item-title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24upx;

				.name {
					font-size: 30upx;
					font-weight: bold;
					color: rgba(101, 101, 101, 1);
				}

				.price {
					font-size: 26upx;
					font-weight: bold;
					color: rgba(236, 71, 21, 1);
				}
			}

			.item-con {
				border-bottom: 1px solid rgba(221, 221, 221, 1);
				margin-bottom: 10upx;
				padding-bottom: 10upx;

				.con-row {
					display: flex;
					font-size: 24upx;
					font-weight: 500;
					color: rgba(101, 101, 101, 1);
					line-height: 34upx;
					margin-bottom: 18upx;

					.txt {
						flex: none;
						color: #999;
						margin-right: 10upx;
					}

					.txt-info {
						flex: 1;
					}
				}

				.flex-row {
					display: flex;
					justify-content: space-between;

					.row {
						font-size: 24upx;
						font-weight: 500;
						color: rgba(153, 153, 153, 1);
						margin-bottom: 18upx;
					}
				}

				.img-box {
					flex: 1;
					margin-right: 20upx;

					.img {
						width: 90upx;
						height: 90upx;
						border-radius: 6px;
						margin-right: 10upx;
					}
				}
			}

			.light {
				color: #333;
				margin: 0 6upx;
			}
			.message{
				padding: 20upx;
			}
		}
	}
}
</style>
